<template>
  <view>
    <image class="content" src="@/static/code.png"></image>
	<!-- 返回按钮 -->
	<view class="backBox" @click="backPage" :style="{'top': topDis + 'px' }">
		<image src="../../static/back.png" mode=""></image>
	</view>
    <view class="contenta">
		<u-gap :height="topDis"></u-gap>
      <view class="head">
        <view class="left">
          <view class="titleHead">修改密码</view>
          <view class="title">请输入您的新旧密码</view>
        </view>

      </view>
      <view class="cardTag" style="margin-top: 70rpx;">

        <view class="card">
          <u-form ref="uForm" :model="form">
            <u-form-item>
              <view style="display: flex;align-items: center;background: #fbfbfb;height: 110rpx;width:100%">
                <u-input v-model="form.password" clearable placeholder="请输入旧密码"/>
              </view>
            </u-form-item>
            <u-form-item>
              <view style="display: flex;align-items: center;background: #fbfbfb;height: 110rpx;width:100%">
                <u-input v-model="form.newPassword" clearable placeholder="请输入新密码">
                </u-input>
              </view>
            </u-form-item>
            <u-form-item>
              <view style="display: flex;align-items: center;background: #fbfbfb;height: 110rpx;width:100%">
                <u-input v-model="form.confirmPassword" clearable placeholder="请再次输入新密码">
                </u-input>
              </view>
            </u-form-item>
          </u-form>
          <view :class="add?'squareNext':''" class="square" @click="submit()">
            确认修改
          </view>
        </view>
      </view>

    </view>
  </view>
</template>
<script>

import {LoginApi} from "@/comms/api/loginApi";
import {Msg} from "@/utils/BaseUtils";

export default {
  data() {
    return {
      value: '',
      IndexTag: 0,
      add: false,
      seconds: 60,
      form: {
        account: '',
        password: '',
        newPassword: '',
        confirmPassword: ''
      },
	  topDis: ''
    }
  },
  created() {
  	this.topDis = uni.getStorageSync('topDis')
  },
  watch: {
    IndexTag(oldValue) {
      this.form = {
        account: '',
        password: ''
      }
    },
    form: {
      deep: true,
      handler(newvalue) {
        let data = ['', undefined, null]
        let val = 0
        Object.keys(newvalue).map(key => {
          if (!data.includes(newvalue[key])) {
            val += 1
          }
        })
        if (val == 3) {
          this.add = true
        } else {
          this.add = false
        }
      },
    },
  },
  methods: {
	  backPage(){
	  	uni.navigateBack({
	  		delta: 1
	  	})
	  },
    submit() {
      const {password, newPassword, confirmPassword} = this.form;
      if (!password || !newPassword || !confirmPassword) {
        return Msg.error("请输入密码")
      }
      if (newPassword != confirmPassword) {
        return Msg.error("新密码和确认密码不一致")
      }
      LoginApi.updatePwd({password, newPassword})
          .then(res => {
            Msg.success("修改成功")
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/login/login'
              })
            }, 1000)
          })
    },
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  box-sizing: border-box;

}
.backBox{
	padding: 20rpx;
	position: fixed;
	left: 5rpx;
	z-index: 9999;
	image{
		width: 48rpx;
		height: 48rpx;
	}
}
.contenta {
  position: absolute;
  top: 0rpx;
  width: 100%;

}


.yhxy {
  display: flex;
  align-items: center;
  padding: 40rpx;
  font-size: 26rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: Regular;
  text-align: left;
  color: #666666;
  position: fixed;
  bottom: 80rpx;
  left: 40rpx;

  text {
    color: #1763FC;
  }
}

.titleHead {
  font-size: 64rpx;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: bold;
  text-align: left;
  color: #3f4151;
  // font-weight: 500;
  line-height: 90rpx;
}

.head {
  width: 670rpx;
  height: 202rpx;
  margin: 128rpx auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    text-align: left;
    color: #3f4151;
    line-height: 48rpx;
	margin-top: 20rpx;
  }

  .img {
    width: 168rpx;
    height: 64rpx;
  }

  .img1 {
    width: 144rpx;
    height: 144rpx;
  }
}

.card {
  width: 670rpx;
  background: #FFF;
  border-radius: 20rpx;
  margin: auto;
  box-sizing: border-box;
  padding: 20rpx 30rpx;
}

.cardTag {
  width: 670rpx;
  background: #FFF;
  border-radius: 20rpx;
  margin: auto;
}

.squareNext {
  opacity: 1 !important;
}

.square {
  width: 610rpx;
  height: 110rpx;
  background: #1763FC;
  border-radius: 20rpx;
  text-align: center;
  line-height: 110rpx;
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: Regular;
  text-align: center;
  color: #ffffff;
  margin: 40rpx 0;
  opacity: 0.5;
}


.headcard {
  width: 100%;
  height: 100rpx;
  background: #fbfbfb;
  display: flex;
  justify-content: space-between;
  border-radius: 20rpx 20rpx 0 0;
  line-height: 100rpx;
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: Regular;
  text-align: left;
  color: #666666;
  
  .radius1 {
  	border-radius: 0 0 0 20rpx;
  }
  
  .radius {
  	border-radius: 0 0 20rpx 0;
  }
}

.active,
.active1 {
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: Semibold;
  text-align: center;
  color: #1763fc !important;
  position: relative;
  background: white;
  font-weight: bold;

}

.leftcard {
  flex: 1;
  border-radius: 20rpx 20rpx 0 0;
  position: relative;
  text-align: center;

}

::v-deep .u-border {
  border: none !important;
}

.righcard {
  flex: 1;
  border-radius: 0rpx 20rpx 0 20rpx;
  text-align: center;
}

.wjmm {
  width: 100%;
  text-align: right;
  font-size: 26rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: Regular;
  color: #1763fc;
}
</style>